<template>
  <div class="amap-page-container">
    <el-amap-search-box class="search-box" 
      :search-option="searchOption" 
      :on-search-result="onSearchResult">
    </el-amap-search-box>
    <el-amap class="amap-box" :vid="'amapContainer'" 
      :map-manager="amapManager"
      :center="center"
      :zoom="zoom" 
      :plugin="plugin"
      :events="events">
      <el-amap-marker v-for="(marker, index) in markers" :vid="index" :key="index" :position="marker.position"></el-amap-marker>
    </el-amap>          
  </div>
</template>
<script>
import VueAMap from 'vue-amap' // 引入搞得地图组件
let amapManager = new VueAMap.AMapManager()
export default{
  props: {
    mapAddress: {
      type: String,
      default: ''
    },
    longitude: {
      type: Number,
      default: 0
    },
    latitude: {
      type: Number,
      default: 0
    }
  },
  watch: {
    mapAddress: function () {
      if (!this.mapAddress) {
        this.markers = []
      }
    }
  },
  data () {
    let self = this
    return {
      amapManager,
      // 这里通过高德 SDK 完成。
      geocoder: new AMap.Geocoder({ // eslint-disable-line
        radius: 1000,
        extensions: 'all'
      }),
      zoom: 15,
      markers: [{
        zIndex: 1000,
        position: [this.longitude, this.latitude]
      }],
      center: [113.951659, 22.554267],
      address: '',
      cityName: '',
      events: {
        'click': (e) => {
          let { lng, lat } = e.lnglat
          this.lng = lng
          this.lat = lat
          this.markers = []
          this.geocoder.getAddress([lng, lat], function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.regeocode) {
                // 生成坐标地址
                self.address = result.regeocode.formattedAddress
                self.cityName = result.regeocode.addressComponent.city
                // 生成坐标实例
                self.markers = [{
                  zIndex: 1000,
                  position: [lng, lat]
                }]
                self.$emit('mapUpdata', {lng: lng, lat: lat, adress: self.address, cityName: self.cityName})
              }
            }
          })
        }
      },
      searchOption: {
        city: '全国',
        citylimit: false
      },
      plugin: ['ToolBar', {
        pName: 'Geolocation',
        events: {
          init (o) {
            // o 是高德地图定位插件实例
            o.getCurrentPosition((status, result) => {
              if (result && result.position) {
                this.lng = result.position.lng
                this.lat = result.position.lat
                if (self.longitude && self.latitude) { // 编辑时定位地址为中心点
                  self.center = [self.longitude, self.latitude]
                } else {
                  self.center = [this.lng, this.lat]
                }
                this.loaded = true
              }
            })
          }
        }
      }]
    }
  },
  methods: {
    onSearchResult (pois) {
      let latSum = 0
      let lngSum = 0
      if (pois.length > 0) {
        pois.forEach(poi => {
          let {lng, lat} = poi
          lngSum += lng
          latSum += lat
        })
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        }
        this.center = [center.lng, center.lat]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-vue-search-box-container{
  width:260px;
  height:35px;
}
.amap-page-container {
  position: relative;
  .amap-toolbar{
    top:0!important;
    left:0!important;
  }
  .search-box{
    left:auto!important;
    right:5px;
  }
  .amap-box{
    width:625px;
    height:300px;
  }
  .search-box {
    position: absolute;
    top: 5px;
    left: 5px;
  }
}
</style>
<style lang="scss">
.amap-page-container {
  max-width: 625px;
  .amap-toolbar{
    top:0!important;
    left:0!important;
  }
  .amap-geolocation-con{
    left:5px!important;
    bottom:10px!important;
  }
  .amap-container{
    img{
      vertical-align:baseline;
    }
  }
}
</style>
